<template>
    <div class="my-body">
        <div class="container">
            <el-form :model="userRegisting" label-width="80px" :rules="rules" ref="ruleFormRef">
                <el-form-item label="用户名" prop="username">
                    <el-input type="text" v-model="userRegisting.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="userRegisting.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwordCheck">
                    <el-input type="password" v-model="userRegisting.passwordCheck" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeUpload"
                        :on-success="handleChange" :on-change="onChange" :auto-upload="false" :data="addList">
                        <img v-if="userRegisting.header_pic" :src="userRegisting.header_pic" class="avatar" alt>
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>

                </el-form-item>
                <span style="color: red">{{ msg }}</span>
                <el-button @click="submit">注册</el-button>
                <el-button @click="back">返回</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import User from '@/class/User';
import { RouterName } from '@/router';
const store = useUserStore();
const router = useRouter();

const userRegisting = reactive(new User({
    username: '',
    password: '',
    passwordCheck: '',
    header_pic: ''
}));
const addList = reactive({});
const imageUrl = ref('');
const msg = ref('');

const beforeUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
};

const onChange = (file, fileList) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        userRegisting.header_pic = e.target.result;
    };
    reader.readAsDataURL(file.raw);
};

const handleChange = (res, file) => {
    imageUrl.value = URL.createObjectURL(file.raw);
};

const submit = async () => {
    if (userRegisting.password !== userRegisting.passwordCheck) {
        msg.value = '两次输入的密码不一致，请重新输入！';
        return;
    }
    msg.value = '';
    const result = await store.userRegister(userRegisting);
    if (result === true) {
        await router.push('/login');
    }
}
const back =()=>{
    router.push({
        name:RouterName.Login
    })
}
</script>

<style scoped>
.my-body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url("/public/login-back.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container {
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 40%;
    /* 居中 */
    right: 35%;
    /* 右边 */
    transform: translate(0, -50%)
}

h1 {
    text-align: center;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>